<template>
	<section>
		<div class="head-wrap">
			<user-info></user-info>
			<personal-bar></personal-bar>
		</div>

		<ul class="model-wrap">
			<li v-for="(item, index) in dataList" :key="item.id" class="model-list">
				<div class="content" @click="toDetail(item)">
					<img :src='staticURL+item.thumbnail_url' v-if='item.thumbnail_url' class='bg_logo'/>
					<img src="@/assets/img/defaultBg.png" class='bg_logo' v-else/>
					<div class="comment btn" v-if='item.status == 1' @click.stop="toComment(item)">点评</div>
					<div class="not-comment btn" v-if='item.status == 2'>已点评</div>
					<div class="content-middle">
						<div class="content-bottom">
							<span class="student">{{item.realname}}</span>
							<div class="student">{{item?.create_time?.slice(0,10)}}</div>
						</div>
						<p class="name">{{item.name}}</p>
					</div>
				</div>
			</li>
		</ul>
		
		<model-render v-if="isShowModel" :model_id="model_id" @close="isShowModel = false"></model-render>
		<common-pagination v-if='total > 10' :total="total" :size="searchData.size" @size-change="handelPagesizeChange" @page-change="handlePageChange"></common-pagination>
	</section>
</template>

<script>
	import utils from '@/assets/js/utils';
	import modelRender from '../model/components/modelRender';
	import CommonPagination from '@/components/CommonPagination';
	import PersonalBar from '@/components/PersonalBar';
	import UserInfo from './components/userInfo';
	import modelComment from './components/modelComment';
	import {myStudentModel} from '@/api/personal.js';
	export default {
		components: {
			CommonPagination,
			PersonalBar,
			UserInfo,
			modelRender,
			modelComment
		},
		data() {
			return {
				total:0,
				dataList:[],
				searchData: {
					page: 1,
					size: 10,
					status:''
				},
				isShowModel: false
			};
		},
		created() {
			this.type = this.$route.query.type;
			if(this.type){
				this.getMyStudentModel();
			}
		},
		methods: {
			async getMyStudentModel() {
				const {
					data,
					status
				} = await myStudentModel(this.searchData);
				if (status !== 200) return
				if (data.code == 200) {
					this.dataList = data?.data[`${this.type}_list`] || [];
					this.total = data?.data?.total || 0;
				} else {
					this.dataList = [];
					this.total = 0
					this.$message.warning(data && data.message || '获取失败');
				}
			},

			handelPagesizeChange(size) {
				this.searchData.size = size;
				this.getMyStudentModel();
			},
			
			handlePageChange(page) {
				this.searchData.page = page;
				this.getMyStudentModel();
			},
			toDetail(item) {
				this.model_id = item.id;
				this.isShowModel = true;
			},
			close() {
				this.isShowModel = false;
				this.isShowComment = false;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.head-wrap{
		@include flex-row;
		justify-content: space-between;
		margin-bottom: 30px;
	}
	.title{
		font-weight: bold;
		font-size: 18px;
		color: #000000;
		margin-bottom: 16px;
	}
	.info{
		@include flex-row;
		justify-content: space-between;
		margin-bottom: 15px;
		.sub{
			width: 24%;
			height: 100px;
			@include flex-row;
			justify-content: center;
			border-radius: 10px 10px 10px 10px;
			img{
				display: block;
				width: 62px;
				height: 62px;
				margin-right: 40px;
			}
			div{
				@include flex-row;
				flex-direction: column;
				justify-content: space-between;
				span{
					font-size: 14px;
					color: #6C7B8A;
				}
				p{
					font-weight: bold;
					font-size: 30px;
				}
			}
		}
		.work{
			background: #E0F0FF;
			p{
				color: #0AB7FF;
			}
			
		}
		.boutique{
			background: #FFEEEE;
			p{
				color: #FF4747;
			}
		}
		.group{
			background: #F9EEFF;
			p{
				color: #B252FF;
			}
		}
		.total{
			background: #EEFFF9;
			p{
				color: #42D58F;
			}
		}
	}
	.tab{
		display:flex;
		align-items: center;
		margin-bottom: 30px;
		padding-left: 10px;
		padding-top: 10px;
		span{
			@include cursor-style;
			margin-right: 20px;
			font-size: 14px;
			color: #666666;
		}
		.current{
			font-weight: 500;
			color: #333333;
			background: url("../../assets/img/tab-active.png") no-repeat center bottom;
			background-size: 100% 4px;
		}
	}
	.model-wrap{
		display: flex;
		flex-wrap: wrap;
		.model-list{
			width: 20%;
			margin-bottom: 30px;
			.content{
				position: relative;
				width: 90%;
				height: 100%;
				.bg_logo{
					display: block;
					width: 100%;
					height: 322px;
					border-radius: 10px 10px 0px 0px;
				}
				.content-middle{
					z-index: 9;
					position: absolute;
					top:0;
					left: 0;
					right: 0;
					width: 100%;
					height: 322px;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding: 20px 26px;
					box-sizing: border-box;
					border-radius: 10px 10px 0px 0px;
					cursor: pointer;
					background: rgba(0, 0, 0, 0.6);
					color: #fff;
					.name{
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						font-weight: 400;
						font-size: 14px;
						color: #FFFFFF;
					}
				}
				.content-bottom{
					@include flex-row;
					justify-content: space-between;
					.student{
						font-size: 14px;
						color: #999999;
					}
				}
				.btn{
					width: 100%;
					height: 34px;
					line-height: 34px;
					text-align: center;
					border-radius: 0px 0px 5px 5px;
					font-size: 14px;
				}
				.comment{
					background: #FFC267;
					color: #FFFFFF;
					@include cursor-style;
				}
				.not-comment{
					background: #DFE5E7;
					color: #666666;
				}
			}
		}
	}
	
</style>
